<template>
    <h3>表单输入绑定 <a target="_blank" href="https://cn.vuejs.org/guide/essentials/forms.html">vue 文档</a></h3>
    <p><b>表单输入绑定 v-model,数据需要在 data 中声明</b></p>

    <el-form ref="formRef" :model="form" label-width="auto"> 
        
        <el-divider content-position="left">单行文本框</el-divider>
        <p>已输入: {{ vModelMessage }}</p>
        <el-form-item label="单行文本">
            <el-input v-model="vModelMessage" placeholder="输入内容" />
        </el-form-item>

        <el-divider content-position="left">多行文本框</el-divider>
        <p style="white-space: pre-line;"> 已输入: {{ vModelMessageMultipleLines }}</p>
        <el-form-item label="Textarea">
            <el-input v-model="vModelMessageMultipleLines" :rows="5" type="textarea" placeholder="请输入" />
        </el-form-item>

        <el-divider content-position="left">Checkbox 复选框</el-divider>
        <p>已选择: {{ checkData }}</p>
        <el-form-item label="Checkbox Demo">
            <el-checkbox-group v-model="checkData">
                <el-checkbox label="Alexliu" />
                <el-checkbox label="Alex Lau" />
                <el-checkbox label="Alex Jhon" />
            </el-checkbox-group>
        </el-form-item>

        <el-divider content-position="left">Radio 单选</el-divider>
        <p>已选择: {{ picked }}</p>
        <el-form-item label="Radio Demo">
            <el-radio-group v-model="picked">
                <el-radio label="A">Option A</el-radio>
                <el-radio label="B">Option B</el-radio>
                <el-radio label="C">Option C</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-divider content-position="left">Select 选择框</el-divider>
        <p>已选择: {{ selected }}</p>
        <el-form-item label="Select Demo">
            <el-select v-model="selected" placeholder="Please select one">
                <el-option label="A" value="A" />
                <el-option label="B" value="B" />
                <el-option label="C" value="C" />
            </el-select>
        </el-form-item>
    </el-form>

</template>

<script>
export default {
    name: "formTemplate",
    data(){
        // 定义参数
        return { 
            vModelMessage: "",
            vModelMessageMultipleLines: "",
            checkData: [],
            picked: "",
            selected: "",
        }
    }
}
</script>